<template>
    <el-container>
        <el-header>
            <PrimaryButton text="增加" :click="showAdd" />
            <SearchInput placeholder="请输入编号" v-model="data.mu" />
            <SearchButton :click="search" />
        </el-header>
        <el-main>
            <el-table
                stripe
                :data="tableData"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                v-loading.fullscreen.lock="loading"
            >
                <el-table-column prop="mu" label="编号" width="180" />
                <el-table-column prop="phone" label="电话" />
                <el-table-column label="操作" width="200">
                    <template #="{ row }">
                        <PlainButton
                            text="编辑"
                            :click="() => showUpdate(row.mu)"
                        />
                        <PlainButton
                            text="删除"
                            :click="() => doDelete(row.mu)"
                        />
                    </template>
                </el-table-column>
            </el-table>
            <SearchPagination
                :currentPage="currentPage"
                :total="total"
                :limit="limit"
                @handleCurrentChange="handleCurrentChange"
                @handleSizeChange="handleSizeChange"
            />
        </el-main>
        <el-dialog width="35%" title="添加" v-model="showAddForm">
            <el-form
                ref="formRef"
                :rules="rules"
                :model="form"
                label-width="100px"
            >
                <el-form-item prop="phone" label="电话">
                    <el-input v-model="form.phone" placeholder="请输入电话" />
                </el-form-item>
                <el-form-item>
                    <PrimaryButton text="确定" :click="doAdd" />
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog width="35%" title="修改" v-model="showUpdateForm">
            <el-form
                ref="updateFormRef"
                :rules="rules"
                :model="updateForm"
                label-width="100px"
            >
                <el-form-item prop="phone" label="电话">
                    <el-input
                        v-model="updateForm.phone"
                        placeholder="请输入电话"
                    />
                </el-form-item>
                <el-form-item>
                    <PrimaryButton text="确定" :click="doUpdate" />
                </el-form-item>
            </el-form>
        </el-dialog>
    </el-container>
</template>
<script>
import useTableData from '@/chaos/functions/composables/useTableData';
import useAddForm from '@/chaos/functions/composables/useAddForm';
import useUpdateForm from '@/chaos/functions/composables/useUpdateForm';

export default {
    name: 'ChaosUser',
    setup() {
        const domain = 'chaosUser';
        const rules = {
            phone: [{ required: true, message: '请输入电话', trigger: 'blur' }],
        };
        const { search, ...useTableDataRest } = useTableData(domain);
        return {
            search,
            rules,
            ...useTableDataRest,
            ...useAddForm(domain, search),
            ...useUpdateForm(domain, search),
        };
    },
};
</script>
<style lang="less" scoped>
.el-form {
    width: 500px;
}
</style>
